<template>
  <div class="article-page">
    <div class="banner">
      <div class="container">
        <h1>{{ single_article.article.title }}</h1>
        <div class="article-meta">
          <a href="/profile/eric-simons"><img :src=single_article.article.author.image /></a>
          <div class="info">
            <a href="/profile/eric-simons" class="author">{{ single_article.article.author.username }}</a>
            <span class="date">{{ single_article.article.updatedAt }}</span>
          </div>
          <button class="btn btn-sm btn-outline-secondary"
            v-if="userinfo?.username !== single_article.article.author.username"
            @click="shiftFollow(single_article.article.author.following)">
            <i class="ion-plus-round"></i>
            &nbsp; <span v-if="single_article.article.author.following === true">UnFollow {{
              single_article.article.author.username }}</span>
            <span v-else>Follow {{ single_article.article.author.username }}</span>
            <span class="counter">(10)</span>
          </button>
          &nbsp;&nbsp;
          <button class="btn btn-sm btn-outline-primary"
            v-if="userinfo?.username !== single_article.article.author.username"
            @click="shiftFavorite(single_article.article.favorited)">
            <i class="ion-heart"></i>
            &nbsp; <span v-if="single_article.article.favorited === false">Favorite Post</span>
            <span v-else>UnFavorite Post</span>
            <span class="counter">({{ single_article.article.favoritesCount }})</span>
          </button>
          <RouterLink class="btn btn-sm btn-outline-secondary"
            :to="{ name: 'update_article', params: { slug: single_article.article.slug } }"
            v-if="userinfo?.username === single_article.article.author.username">
            <i class="ion-edit"></i> Edit Article
          </RouterLink>
          <button class="btn btn-sm btn-outline-danger"
            v-if="userinfo?.username === single_article.article.author.username" @click="delArticle()">
            <i class="ion-trash-a"></i> Delete Article
          </button>
        </div>
      </div>
    </div>

    <div class="container page">
      <div class="row article-content">
        <div class="col-md-12">
          <p v-for="content in single_article.article.body.split('\n')">
            {{ content }}
          </p>
          <ul class="tag-list">
            <li class="tag-default tag-pill tag-outline" v-for="tag in single_article.article.tagList">{{ tag }}</li>
          </ul>
        </div>
      </div>

      <hr />

      <!-- <div class="article-actions">
      <div class="article-meta">
        <a href="profile.html"><img :src=single_article.article.author.image /></a>
        <div class="info">
          <a href="" class="author">{{ single_article.article.author.username }}</a>
          <span class="date">{{ single_article.article.updatedAt }}</span>
        </div>

        <button class="btn btn-sm btn-outline-secondary" v-if="userinfo?.username !== single_article.article.author.username">
          <i class="ion-plus-round"></i>
          &nbsp; Follow {{ single_article.article.author.username }}
        </button>
        &nbsp;
        <button class="btn btn-sm btn-outline-primary" v-if="userinfo?.username !== single_article.article.author.username">
          <i class="ion-heart"></i>
          &nbsp; Favorite Article <span class="counter">({{ single_article.article.favoritesCount }})</span>
        </button>
        <button class="btn btn-sm btn-outline-secondary" v-if="userinfo?.username === single_article.article.author.username">
          <i class="ion-edit"></i> Edit Article
        </button>
        <button class="btn btn-sm btn-outline-danger" v-if="userinfo?.username === single_article.article.author.username">
          <i class="ion-trash-a"></i> Delete Article
        </button>
      </div>
    </div> -->

      <div class="row">
        <div class="col-xs-12 col-md-8 offset-md-2">
          <form class="card comment-form">
            <div class="card-block">
              <textarea class="form-control" placeholder="Write a comment..." rows="3"
                v-model="comment_body.comment.body"></textarea>
            </div>
            <div class="card-footer">
              <img :src="userinfo?.image" class="comment-author-img" />
              <button class="btn btn-sm btn-primary" @click.prevent="PostComment()">Post Comment</button>
            </div>
          </form>

          <!-- <div class="card" v-for="(comment, index) in multi_comments.comments">
            <div class="card-block">
              <p class="card-text">
                {{ comment.body }}
              </p>
            </div>
            <div class="card-footer">
              <a href="/profile/author" class="comment-author">
                <img :src="comment.author.image" class="comment-author-img" />
              </a>
              &nbsp;
              <a href="/profile/jacob-schmidt" class="comment-author">{{ comment.author.username }}</a>
              <span class="date-posted">{{ comment.updatedAt }}</span>
              <span class="mod-options" @click.prevent="delComment(index)">
                <i class="ion-trash-a"></i>
              </span>
            </div>
          </div> -->

          <CommentItem v-for="comment in multi_comments.comments" :comment="comment" :slug="single_article.article.slug"
            @del_comment="delComment"></CommentItem>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
let route = useRoute();
// console.log(route.params.slug);
import { onMounted, ref, watch } from 'vue';
import type { AddComment, MultiComment, ProfileReq, SingleArticle, SingleComment } from '../models';
import axios from '../utils/request';
import { storeToRefs } from 'pinia';
import { useUserStore } from '../store/user';
import CommentItem from '../components/CommentItem.vue';
import { useRouter } from 'vue-router';

let router = useRouter();
let store = useUserStore();
const { userinfo } = storeToRefs(store);
let single_article = ref<SingleArticle>({
  article: {
    slug: '',
    title: '',
    description: '',
    body: '',
    tagList: [],
    createdAt: '',
    updatedAt: '',
    favorited: false,
    favoritesCount: 0,
    author: {
      username: '',
      bio: '',
      image: '',
      following: false
    }
  }
})
let multi_comments = ref<MultiComment>({
  comments: []
})
let follow_res = ref<ProfileReq>({
  profile: {
    username: '',
    bio: '',
    image: '',
    following: false
  }
})

let comment_body = ref<AddComment>({
  comment: {
    body: ''
  }
})
let single_comment = ref<SingleComment>({
  comment: {
    id: 0,
    createdAt: '',
    updatedAt: '',
    body: '',
    author: {
      username: '',
      bio: '',
      image: '',
      following: false
    }
  }
})
function shiftFavorite(favorited: boolean) {
  if (favorited === false) {
    axios.post(`/articles/${single_article.value.article.slug}/favorite`).then(res => {
      single_article.value = res.data;
    })
  } else {
    axios.delete(`/articles/${single_article.value.article.slug}/favorite`).then(res => {
      single_article.value = res.data;
    })
  }

}

function delArticle() {
  axios.delete(`/articles/${single_article.value.article.slug}`).then(res => {
  });
  router.push({ name: 'home' });
}

function delComment(comment_id: number) {
  multi_comments.value.comments = multi_comments.value.comments.filter(comment => comment.id !== comment_id);
}

function shiftFollow(following: boolean) {
  if (following === true) {
    axios.delete(`/profiles/${single_article.value.article.author.username}/follow`).then(res => {
      follow_res.value = res.data;
      single_article.value.article.author.following = follow_res.value.profile.following;
    })
  } else {
    axios.post(`/profiles/${single_article.value.article.author.username}/follow`).then(res => {
      follow_res.value = res.data;
      single_article.value.article.author.following = follow_res.value.profile.following;
    })
  }
}
function PostComment() {
  axios.post(`/articles/${single_article.value.article.slug}/comments`, comment_body.value).then(res => {
    single_comment.value = res.data;
    multi_comments.value.comments.unshift(single_comment.value.comment);
  })
  comment_body.value.comment.body = '';
}
// function delComment(index: number) {
//   axios.delete(`/articles/${single_article.value.article.slug}/comments/${multi_comments.value.comments[index].id}`);
//   multi_comments.value.comments.splice(index, 1);
// }

watch(
  () => route.params.slug,
  (new_slug) => {
    axios.get(`/articles/${new_slug}`).then(res => {
      single_article.value = res.data;
    })
    // axios.get(`/articles/${new_slug}/comments`).then(res => {
    //   multi_comments.value = res.data;
    // })
  }
)
onMounted(() => {
  axios.get(`/articles/${route.params.slug}`).then(res => {
    single_article.value = res.data;
    axios.get(`/articles/${single_article.value.article.slug}/comments`).then(res => {
      multi_comments.value = res.data;
    })
  })
})
</script>
<style scoped></style>
